<template>
	<div class="container mycenter">
		<div class="backmain" v-if='myjson'>
			<div>
				<div class="leftmain">
					<div class="userimg"><img :src="myjson.headImg"></div>
					<p class="username">{{myjson.name}}</p>
					<p class="colorsty">{{myjson.phone}}</p>
				</div>
				<router-link  to="/vipGrade"><div class="rightmain" >{{vipName}}</div></router-link>
			</div>
			<div class="backmenu">
				<router-link class="samesty" to="/fine">余额：{{myjson.money}}</router-link>
				<router-link class="samesty" :to="{path:'/bean',query:{id:myjson.totalDou}}">豆：{{myjson.totalDou}}</router-link>
				<router-link class="samesty" to="/integral">积分：{{myjson.totalPoint}}</router-link>
			</div>
		</div>

		<van-cell-group v-if="myjson">
			<router-link to="/personal" class="samelink">
				<div class="van-cell van-cell--clickable van-hairline">
					<i class="imgpic"><img src="../../assets/userimg.png"></i>
					<div class="van-cell__title"><span class="van-cell-text">个人信息</span></div>
					<div class="van-cell__value"><span>资料</span></div><i class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
				</div>
			</router-link>
			<router-link class="samelink" v-show='myjson' v-if="myjson.isAuth == 1">
				<div class="van-cell van-cell--clickable van-hairline">
					<i class="imgpic"><img src="../../assets/memberpic.png"></i>
					<div class="van-cell__title"><span class="van-cell-text">会员认证</span></div>
					<div class="van-cell__value"><span>已认证</span></div><i class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
				</div>
			</router-link>
			<router-link to="/memberindent" class="samelink" v-else>
				<div class="van-cell van-cell--clickable van-hairline">
					<i class="imgpic"><img src="../../assets/memberpic.png"></i>
					<div class="van-cell__title"><span class="van-cell-text">会员认证</span></div>
					<div class="van-cell__value"><span>未认证</span></div><i class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
				</div>
			</router-link>
			<router-link to="/card" class="samelink">
				<div class="van-cell van-cell--clickable van-hairline">
					<i class="imgpic"><img src="../../assets/cardpic.png"></i>
					<div class="van-cell__title"><span class="van-cell-text">卡卷兑换</span></div>
					<div class="van-cell__value"><span>宅配卡激活</span></div><i class="van-icon van-icon-arrow van-cell__right-icon"><!----></i></div>
			</router-link>
			<router-link to="/coupon" class="samelink">
				<div class="van-cell van-cell--clickable van-hairline">
					<i class="imgpic"><img src="../../assets/coupnpic.png"></i>
					<div class="van-cell__title"><span class="van-cell-text">优惠券</span></div>
					<div class="van-cell__value"><span>抵用现金</span></div><i class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
				</div>
			</router-link>
			<router-link to="/order" class="samelink">

				<div class="van-cell van-cell--clickable van-hairline">
					<i class="imgpic" style="width: 0.34rem;"><img src="../../assets/orderpic.png"></i>
					<div class="van-cell__title"><span class="van-cell-text">我的订单</span></div>
					<i class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
				</div>
			</router-link>
			<router-link to="/wallet" class="samelink">

				<div class="van-cell van-cell--clickable van-hairline">
					<i class="imgpic"><img src="../../assets/redpack.png"></i>
					<div class="van-cell__title"><span class="van-cell-text">我的钱包</span></div>
					<i class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
				</div>
			</router-link>
			<router-link to="/collect" class="samelink">
				<div class="van-cell van-cell--clickable van-hairline">
					<i class="imgpic"><img src="../../assets/collect.png"></i>
					<div class="van-cell__title"><span class="van-cell-text">我的收藏</span></div>
					<i class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
				</div>
			</router-link>
			<router-link to="/perfer" class="samelink">
				<div class="van-cell van-cell--clickable van-hairline">
					<i class="imgpic"><img src="../../assets/goodpic.png"></i>
					<div class="van-cell__title"><span class="van-cell-text">我的偏好</span></div>
					<i class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
				</div>
			</router-link>
			<router-link to="/addresslist" class="samelink">
				<div class="van-cell van-cell--clickable van-hairline">
					<i class="imgpic"><img src="../../assets/addresspic.png"></i>
					<div class="van-cell__title"><span class="van-cell-text">地址管理</span></div>
					<i class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
				</div>
			</router-link>
		</van-cell-group>
	</div>
</template>

<script>
	import { myindex } from '@/api/getData';
	export default {
		name: 'mycenter',
		data() {
			return {
				url: {
					'token': localStorage.getItem('token'),
					'device': 'gzh',
				},
        myjson: null,
        vipName: '普通会员',
			}
		},
		created() {
			this.init();
		},
		methods: {
			init() {
				myindex(this.url).then(res => {
          this.myjson = res.data;
          if(res.data && res.data.level){
            switch(res.data.level){
                  case '0':
                      this.vipName = '普通会员';
                      break;
                  case '1':
                      this.vipName = '黄铜';
                      break;
                  case '2':
                      this.vipName = '白金';
                      break;
                  case '3':
                      this.vipName = '黄金';
                      break;
                  case '4':
                      this.vipName = '砖石';
                      break;
                  default:
                      this.vipName = '普通会员';
                      break;
                  }
          }
				}).catch(res => {})
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss">
	.mycenter {
		.backmain {
			background: url(../../assets/backs.png);
			margin-top: 0.1rem;
			margin-bottom: 0.2rem;
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
		.leftmain {
			padding: 0.3rem 0.52rem;
			display: inline-block;
		}
		.userimg {
			width: 1rem;
			height: 1rem;
		}
		.userimg img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
		.username {
			margin-top: 0.58rem;
			margin-bottom: 0;
			color: #FFFFFF;
			font-size: 0.28rem;
		}
		.colorsty {
			color: #FFFFFF;
			margin-top: 0.2rem;
			font-size: 0.24rem;
			margin-bottom: 0.25rem;
		}
		.rightmain {
			float: right;
			font-size: 0.3rem;
			color: #FFFFFF;
			padding: 0.3rem;
		}
		.backmenu {
			height: 0.78rem;
		}
		.backmenu a {
			width: 32%;
			height: 0.58rem;
			text-align: center;
			margin-top: 0.1rem;
			border-left: solid 1px #fff;
			display: inline-block;
			color: #fff;
			line-height: 0.58rem;
		}
		.backmenu a:first-child {
			border-left: 0;
		}
		.samelink {
			border-bottom: 1px solid #e5e5e5;
			display: block;
		}
		.imgpic {
			width: 0.4rem;
			height: 0.4rem;
			margin-right: 5px;
		}
		.imgpic img {
			width: 100%;
			height: 100%;
		}
	}
</style>